<template>
  <cube-page type="button-view" title="大石头客户预测" @rightBtnClick="zfilterDrawer" :rightBtn="true">
    <div slot="content">
      <cube-tab-bar v-model="selectedLabel" show-slider @change="changeHandler">
        <cube-tab v-for="(item, index) in tabs" :label="item" :key="index"></cube-tab>
      </cube-tab-bar>


      <drawer :show="drawerShow" @change-show="changeDrawerShow" @on-hide="onHide" @on-show="onShow">
        <div class="zuiDrawerWrap" slot="drawer">
          <div class="ztabs">
            <div class="zrow">
              <div class="zlabel">医院</div>
              <div class="zdes">
                <cube-select class="zselect" v-model="searchOut.hospital" :options="hospitalList" placeholder="请选择医院">
                </cube-select>
              </div>
            </div>
            <div class="zrow">
              <div class="zlabel">品种信息</div>
              <div class="zdes">
                <cube-input class="zinput" v-model="searchOut.name" placeholder="请输入品种信息"></cube-input>
              </div>
            </div>
            <div class="zrow" v-show="routeIndex == 0">
              <div class="zlabel">状态</div>
              <div class="zdes">
                <cube-select class="zselect" v-model="searchOut.type" :options="typelist" placeholder="请选择状态">
                </cube-select>
              </div>
            </div>
          </div>
          <div class="zrow">
            <div class="zlabel">开始时间</div>
            <div class="zdes">
              <div class="zdatepicker" @click="showDatePicker2">
                {{searchOut.sdate}}
                <i class="cubeic-wrong" v-show="searchOut.sdate" @click.stop.prevnet="searchOut.sdate=''"></i>
              </div>
            </div>
          </div>
          <div class="zrow">
            <div class="zlabel">结束时间</div>
            <div class="zdes">
              <div class="zdatepicker" @click="showDatePickerS">
                {{searchOut.edate}}
                <i class="cubeic-wrong" v-show="searchOut.edate" @click.stop.prevnet="searchOut.edate=''"></i>
              </div>
            </div>
          </div>
          <div class="zui-flex btn-area">
            <cube-button class="zbtn J_reset" @click="zreset">重置</cube-button>
            <cube-button class="zbtn J_sub" @click="zsubmit">提交</cube-button>
          </div>

        </div>
      </drawer>

      <router-view></router-view>
    </div>
  </cube-page>
</template>

<script>
import {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} from 'vuex'

import BusFactory from 'vue-happy-bus';
import CubePage from '@/components/cube-page'
import CubeView from '@/components/cube-view'
import Drawer from '@/components/drawer'
import {zshortageList, zhospitalList, zfavoritesAdd} from '@/util/api';

export default {
  name: 'Forecast',
  components: {
    CubeView,
    CubePage,
    Drawer
  },
  computed: {
    ...mapState(['loginUserInfo']),
  },
  data () {
    return {
      bus: BusFactory(this),
      showLoading: true,
      selectedLabel: '待反馈信息',
      tabs: ['待反馈信息', '历史预测查询', '销售主动上报'],
      routerLink: ['/forecast/newList', '/forecast/historyList', '/forecast/saleSubList'],
      searchOut: {
        hospital: '',
        name: '',
        type: '1',
        sdate: '',
        edate: ''
      },
      searchOutOld: {
        hospital: '',
        name: '',
        type: '1',
      },
      drawerShow: false,
      hospitalList: [],
      datePickerS: null,
      datePicker: null,
      typelist: [{value: '', text: '全部'}, {value: '1', text: '待反馈'}, {value: '2', text: '已发送'} ],
      routeIndex: 0
    }
  },
  created () {

  },
  mounted() {
    if(this.$route.name == 'SaleSubList'){
      this.routeIndex = 2;
    }else if(this.$route.name == 'HistoryList'){
      this.routeIndex = 1;
    }
    this.selectedLabel = this.tabs[this.routeIndex];
    this.fetchBaseData();
  },
  watch: {

  },
  methods: {
    ...mapMutations(['setW_shortageData']),
    changeHandler (label) {
      this.zutil.deepClone(this.searchOut, this.searchOutOld);
      let _index = this.tabs.findIndex(v=>v==label);
      let _url = this.routerLink[_index];
      this.routeIndex = _index;
      this.$router.replace(_url);
    },
    async fetchBaseData () {
      const zuiCubeLoading = this.$createToast({time: 0,txt: '正在加载中...'});
      zuiCubeLoading.show();
      let res = await zhospitalList();
      res = this.zutil.formatAxiosData(res);
      zuiCubeLoading.hide();
      if(res.code == '0000'){
        if(res.data.list && res.data.list.length){
          res.data.list.forEach(v=>{
            v.text = v.label;
            this.hospitalList.push(v);
          })
        }
        // this.hospitalList = res.data.list;
        let attr = {
          value: '',
          label: '全部',
          text: '全部'
        }
        this.hospitalList.unshift(attr);
      }else{
        this.$createToast({type: 'error', time: 2000, txt: res.message || "获取医院列表失败！"}).show();
      }

      console.log(this.routeIndex)
      this.$router.replace(this.routerLink[this.routeIndex]);
    },
    zfilterDrawer () {
      this.drawerShow = true;
    },
    drawerToggle () {
      this.drawerShow = !this.drawerShow;
    },
    onHide () {

    },
    changeDrawerShow (state) {
      // 在父页面点击mask关闭页面
      this.drawerShow = state;
    },
    onShow () {

    },
    zreset () {
      if(this.routeIndex == 0){
        this.searchOut = {
          hospital: '',
          name: '',
          type: '1',
          sdate: '',
          edate: ''
        }
        if(this.datePicker)
          this.datePicker.$updateProps({value: new Date()});
        if(this.datePickeS)
          this.datePickerS.$updateProps({value: new Date()});
      }
    },
    zsubmit () {
      this.drawerShow = false;

      this.bus.$emit('pageRefresh', this.searchOut);
    },
    showDatePicker2 () {
      let edate = this.searchOut.edate ? new Date(this.searchOut.edate) : new Date();
      // if (!this.datePicker) {
        this.datePicker = this.$createDatePicker({
          min: new Date(1949, 0, 1),
          max: edate,
          value: new Date(),
          onSelect: (date, selectedVal, selectedText) => {
            this.searchOut.sdate = this.moment(date).format('YYYY-MM-DD');
          }
        })
      // }
      this.datePicker.show();
    },
    showDatePickerS () {
      let sdate = this.searchOut.sdate ? new Date(this.searchOut.sdate) : new Date();
      // if (!this.datePickerS) {
        this.datePickerS = this.$createDatePicker({
          min: sdate,
          max: new Date(),
          value: new Date(),
          onSelect: (date, selectedVal, selectedText) => {
            this.searchOut.edate = this.moment(date).format('YYYY-MM-DD');
          }
        })
      // }
      this.datePickerS.show();
    },
    showDatePicker () {
      if (!this.datePicker) {
        this.datePicker = this.$createDatePicker({
          min: new Date(1949, 0, 1),
          max: new Date(),
          value: new Date(),
          onSelect: (date, selectedVal, selectedText) => {
            this.searchOut.date = this.moment(date).format('YYYY-MM-DD');
          }
        })
      }
      this.datePicker.show();
    }
  }
}
</script>

<style scoped lang="scss">

.cube-tab-bar {
  height: 44px;
  font-size: 13px;
  background: #fff;
  border-bottom: 1px solid #ddd;
  .cube-tab {

  }
}

</style>
